import { FC, useContext, useMemo } from "react";
import { ConfigurePageContext } from "../../ConfigurePage";
import { GoodsItem } from "../../ConfigurePageType";
import { CommonModuleProps } from "../PreviewDevice";
import { Image } from "antd";
import EllipsisText from "@/components/dataPresentation/EllipsisText";
import { StyledVerticalGoodsModuleContent, StyledVerticalGoodsItem, StyledVerticalGoodsImgWrapper } from "../../ConfigurePage.styled";
import { AppContext } from "@/providers";

const VerticalGoodsModule: FC<CommonModuleProps> = ({ index }) => {
	const { content } = useContext(ConfigurePageContext);
	const { REACT_APP_BASEURL } = useContext(AppContext);
	const list = useMemo(() => content[index].list as GoodsItem[], [content, index]);
	return (
		<StyledVerticalGoodsModuleContent className="flex flex-wrap px-2 pt-2 justify-between">
			{list.length === 0 && <div className="w-full flex justify-center items-center text-gray-500">暂无纵向商品列表~</div>}
			{list.map(({ cover, name, sku, description }, index) => (
				<StyledVerticalGoodsItem className="rounded-md overflow-hidden box-border mb-2 w-full flex" key={index}>
					<StyledVerticalGoodsImgWrapper className="h-full flex justify-center items-center">
						{cover ? (
							<Image width={130} height={130} style={{ objectFit: "contain" }} src={cover ? `${REACT_APP_BASEURL}${cover}` : ""} />
						) : (
							<span className="text-gray-500">暂无图片~</span>
						)}
					</StyledVerticalGoodsImgWrapper>
					<div className="p-2">
						<EllipsisText showToolip={false} rows={2}>
							{name}
						</EllipsisText>
						<EllipsisText rows={3} className="text-gray-500 text-xs mt-1">
							{description}
						</EllipsisText>
						<div className="flex">
							{sku?.[0]?.price && (
								<div className="text-red-500">
									<span className="text-sm">￥</span>
									<span className="text-base">{sku?.[0]?.price / 100}</span>
								</div>
							)}
							{Boolean(sku?.[0]?.originalPrice) && (
								<div className="text-gray-600 ml-1 line-through leading-6">
									<span className="text-xs">￥</span>
									<span className="text-sm">{sku?.[0]?.originalPrice / 100}</span>
								</div>
							)}
						</div>
					</div>
				</StyledVerticalGoodsItem>
			))}
		</StyledVerticalGoodsModuleContent>
	);
};

export default VerticalGoodsModule;
